<template>
	<!-- 可以用作年终活动模板 -->
	<view class="year-end">
		<movable-area class="share">
			<movable-view direction="all" class="service-img">
				<image 
					:lazy-load="true" 
					src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/service_icon.png" 
					@click="service">
				</image>
			</movable-view>
			<movable-view direction="all" class="share-img">
				<image 
					:lazy-load="true" 
					src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/share.png?v=1" 
					@click="share">
				</image>
			</movable-view>
		</movable-area>
		
		<view class="year-end-main">
			<view class="year-end-toppic">
				<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/year-end/pic1.png?v=2" mode="widthFix"></image>
			</view>
			<view class="year-end-items">
				<view class="year-end-item">
					<view class="year-end-item-tit">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/year-end/title-1.png?v=1" mode="widthFix"></image>
					</view>
					<view class="year-end-item-tips">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/year-end/pic2.png?v=1" mode="widthFix"></image>
					</view>
					<view class="year-end-item-list">
						<view class="year-end-goods-item" v-for="(data,index) in activity1.goods_list" :key="index" @click="goProInfo(data.goods_id,activity1.name)">
							<view class="goods-item-top">
								<image 
									:lazy-load="true" 
									src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/goods-top.png?v=1" mode="widthFix">
								</image>
							</view>
							<view class="goods-item-main">
								<view class="goods-item-main-goods-image">
									<image :src="data.image" mode="widthFix"></image>
								</view>
								<view class="goods-item-main-name">{{data.goods_name}}</view>
								<view class="goods-item-main-price">
									<view class="goods-item-main-price-left">
										<text class="price-label">活动价:￥</text>
										<text class="price-num">{{data.retail_price}}</text>
										<text class="price-market">市场价￥{{data.market_price}}</text>
									</view>
									<view class="price-btn">立即抢购 <u-icon name="arrow-right-double"></u-icon></view>
								</view>
							</view>
							<view class="goods-item-bottom">
								<image 
									:lazy-load="true" 
									src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/goods-bottom.png?v=1" mode="widthFix">
								</image>
							</view>
						</view>
					</view>
				</view>
				<view class="year-end-item">
					<view class="year-end-item-tit">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/year-end/title-2.png?v=2" mode="widthFix"></image>
					</view>
					<view class="year-end-item-tips">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/year-end/pic3.png?v=1" mode="widthFix"></image>
					</view>
					<view class="year-end-item-list">
						<view class="year-end-goods-item" v-for="(data,index) in activity2.goods_list" :key="index" @click="goProInfo(data.goods_id,activity2.name+'-'+data.retail_price)">
							<view class="goods-item-main-hot">
								<view>直降</view>
								<view>{{data.market_price - data.retail_price}}</view>
								<view>元</view>
							</view>
							<view class="goods-item-top">
								<image 
									:lazy-load="true" 
									src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/goods-top.png?v=1" mode="widthFix">
								</image>
							</view>
							<view class="goods-item-main">
								<view class="goods-item-main-goods-image">
									<image :src="data.image" mode="widthFix"></image>
								</view>
								<view class="goods-item-main-name">{{data.goods_name}}</view>
								<!-- <view class="goods-item-main-brief">{{data.brief}}</view> -->
								<view class="goods-item-main-price">
									<view class="goods-item-main-price-left">
										<text class="price-label">活动价:￥</text>
										<text class="price-num">{{data.retail_price}}</text>
										<text class="price-market">市场价￥{{data.market_price}}</text>
									</view>
									<view class="price-btn">立即抢购 <u-icon name="arrow-right-double"></u-icon></view>
								</view>
							</view>
							<view class="goods-item-bottom">
								<image 
									:lazy-load="true" 
									src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/goods-bottom.png?v=1" mode="widthFix">
								</image>
							</view>
						</view>
					</view>
					<view class="year-end-item-tips">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/year-end/pic4.png?v=1" mode="widthFix"></image>
					</view>
					<view class="year-end-item-purchase">
						<view class="year-end-item-purchase-list">
							<view v-for="(data,index) in activity3.goods_list" :key="index" class="year-end-item-purchase-item" @click="goProInfo(data.goods_id,activity3.name)">
								<view class="purchase-item-img"><image :src="data.image" mode="aspectFit"></image></view>
								<view class="goods-price">
									<view class="goods-price-left">
										<view class="goods-price-left-item">
											<view class="tips">零售价</view>
											<view class="num">{{data.market_price}}</view>
										</view>
										<view class="goods-price-left-item">
											<view class="line"></view>
										</view>
										<view class="goods-price-left-item">
											<view class="tips">直降</view>
											<view class="num">{{data.market_price - data.retail_price}}</view>
										</view>
										<!-- <view class="goods-price-left-item">
											<view class="deng"></view>
										</view> -->
									</view>
									<view class="goods-price-right">
										<view class="tips">到手价</view>
										<view class="goods-price-right-p"><text>￥</text>{{data.retail_price}}</view>
									</view>
								</view>
								<view class="goods-name">{{data.goods_name}}</view>
								<view class="goods-lining">{{data.lining}}</view>
							</view>
						</view>
						<view class="load-more" @click="loadMore(1,activity3.shelf_id)">点击查看更多<u-icon name="arrow-right-double"></u-icon></view>
					</view>
					<view class="year-end-item-tips" style="margin-top: 90rpx;">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/year-end/pic5.png?v=1" mode="widthFix"></image>
					</view>
					<view class="year-end-item-purchase">
						<view class="year-end-item-purchase-list">
							<view v-for="(data,index) in activity4.goods_list" :key="index" class="year-end-item-purchase-item" @click="goProInfo(data.goods_id,activity4.name)">
								<view class="purchase-item-img"><image :src="data.image" mode="aspectFit"></image></view>
								<view class="goods-price">
									<view class="goods-price-left">
										<view class="goods-price-left-item">
											<view class="tips">零售价</view>
											<view class="num">{{data.market_price}}</view>
										</view>
										<view class="goods-price-left-item">
											<view class="line"></view>
										</view>
										<view class="goods-price-left-item">
											<view class="tips">直降</view>
											<view class="num">{{data.market_price - data.retail_price}}</view>
										</view>
										<!-- <view class="goods-price-left-item">
											<view class="deng"></view>
										</view> -->
									</view>
									<view class="goods-price-right">
										<view class="tips">到手价</view>
										<view class="goods-price-right-p"><text>￥</text>{{data.retail_price}}</view>
									</view>
								</view>
								<view class="goods-name">{{data.goods_name}}</view>
								<view class="goods-lining">{{data.lining}}</view>
							</view>
						</view>
						<view class="load-more" @click="loadMore(2,activity4.shelf_id)">点击查看更多<u-icon name="arrow-right-double"></u-icon></view>
					</view>
				</view>
				<view class="year-end-item">
					<view class="year-end-item-tit">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/year-end/title-3.png?v=1" mode="widthFix"></image>
					</view>
					<view class="year-end-item-tips">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/year-end/pic6.png?v=2" mode="widthFix"></image>
					</view>
					<view class="year-end-item-list">
						<view class="year-end-goods-item" v-for="(data,index) in activity5.goods_list" :key="index" @click="goProInfo(data.goods_id,data.goods_name)">
							<view class="goods-item-top">
								<image 
									:lazy-load="true" 
									src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/goods-top.png?v=1" mode="widthFix">
								</image>
							</view>
							<view class="goods-item-main">
								<view class="goods-item-main-goods-image">
									<image :src="data.image" mode="widthFix"></image>
								</view>
								<view class="goods-item-main-name">{{data.goods_name}}</view>
								<view class="goods-item-main-brief">{{data.brief}}</view>
								<view class="goods-item-main-price">
									<view class="goods-item-main-price-left">
										<text class="price-label">活动价:￥</text>
										<text class="price-num">{{data.retail_price}}</text>
										<text class="price-market">市场价￥{{data.market_price}}</text>
									</view>
									<view class="price-btn">立即抢购 <u-icon name="arrow-right-double"></u-icon></view>
								</view>
							</view>
							<view class="goods-item-bottom">
								<image 
									:lazy-load="true" 
									src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/goods-bottom.png?v=1" mode="widthFix">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="year-end-info">
				<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/year-end/active-info.png?v=1" mode="widthFix"></image>
			</view>
		</view>
		
		<!-- 客服 -->
		<uni-popup type="center" ref="server">
			<pt-server></pt-server>
		</uni-popup>
		<!-- 客服 -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activity1: [],
				activity2: [],
				activity3: [],
				activity3Page: 0,
				activity3Nomore: false,
				activity4: [],
				activity4Page: 0,
				activity4Nomore: false,
				activity5: [],
				posterImg: ''
			};
		},
		onLoad(options) {
			// 设置缓存链接
			let pages = getCurrentPages();
			let curPage = pages[pages.length - 1];
			uni.setStorageSync('newurl',curPage.$page.fullPath)
			this.init();
			if(uni.getStorageSync('userInfo')){
				this.addFoot('年底活动')
			}
			if(options.parent_id){
				uni.setStorageSync('parent_id',options.parent_id)
				// 如果用户从分享的小程序卡片点击进来的,设置一个url缓存,登录后返回当前缓存url
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				uni.setStorageSync('newurl',curPage.$page.fullPath)
				this.$u.api.binding_refer({id: options.parent_id}).catch(() => {
					console.log('接口报错：绑定失败')
				})
			}
			let scene
			if(options.scene){
				scene = decodeURIComponent(options.scene)
				uni.setStorageSync('parent_id',this.filterUrlParam(scene).pid)
				// 如果用户从分享的小程序卡片点击进来的,设置一个url缓存,登录后返回当前缓存url
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				uni.setStorageSync('newurl',curPage.$page.fullPath)
				this.$u.api.binding_refer({id: this.filterUrlParam(scene).pid}).catch(() => {
					console.log('接口报错：绑定失败')
				})
			}
			// #ifdef H5
			if(!uni.getStorageSync('userInfo')){
				uni.showToast({
					icon:'none',
					title:"请先登录",
					duration:1500
				})
				setTimeout(()=>{
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/login/login'
					})
				},1500)
			}
			// #endif
		},
		methods: {
			// 获取数据
			init(){
				this.$u.api.ActivityShelf({shelf_id:59,limit: 4}).then(res=>{
					const { shelf_list } = res.datas;
					this.activity1 = shelf_list[0];
					this.activity2 = shelf_list[1];
					this.activity3 =  res.datas.shelf_list[2]
					this.activity4 = res.datas.shelf_list[3]
					this.activity5 = shelf_list[4];
					uni.setNavigationBarTitle({
						title: res.datas.name
					})
					this.posterImg = res.datas.img
					if(uni.getStorageSync('userInfo')){
						this.$u.mpShare = {
							title: res.datas.name,
							path: '/events/year-end?parent_id='+ JSON.parse(uni.getStorageSync('userInfo')).user_id,
							imageUrl: res.datas.image
						}
					}else{
						this.$u.mpShare = {
							title: res.datas.name,
							path: '/events/year-end',
							imageUrl: res.datas.image
						}
					}
				})
			},
			// 解析小程序scene参数
			filterUrlParam(urlSearch){
			  let ret = {}
			  let regParam = /([^&=]+)=([\w\W]*?)(&|$|#)/g
			  if (urlSearch) {
			    var strParam = urlSearch;
			    var result
			    while ((result = regParam.exec(strParam)) != null) {
			      ret[result[1]] = result[2]
			    }
			  }
			  return ret
			},
			// 添加足迹
			addFoot(where,goods_id){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: 0,
					goods_id: goods_id?goods_id:0,
					store_goods_id: 0,
					is_new: 1
				})
			},
			// 分享海报
			share(){
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				if(uni.getStorageSync('userInfo')){
					uni.navigateTo({
						animationDuration: 500,
						url: '/events/events-poster?url=' + encodeURIComponent(curPage.$page.fullPath) + '&posterImg='+encodeURIComponent(this.posterImg)+'&name=年底活动'
					})
					this.addFoot('年底活动-分享海报')
				}else{
					uni.showToast({
						icon: 'none',
						title: '请先登录',
						duration: 1500
					})
					setTimeout(() => {
						// #ifdef APP-PLUS
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/login/app-login'
						})
						// #endif
						// #ifdef H5 || MP
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/login/login'
						})
						// #endif
					},1500)
				}
			},
			// 客服
			service(){
				if(uni.getStorageSync('userInfo')){
					this.$refs.server.open()
					this.addFoot('年底活动-联系客服')
				}else{
					uni.showToast({
						icon: 'none',
						title: '请先登录',
						duration: 1500
					})
					setTimeout(() => {
						// #ifdef APP-PLUS
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/login/app-login'
						})
						// #endif
						// #ifdef H5 || MP
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/login/login'
						})
						// #endif
					},1500)
				}
			},
			// 加载更多
			loadMore(type,shelf_id){
				switch (type){
					case 1:
						if(!this.activity3Nomore){
							this.activity3Page++
							this.addData(1,shelf_id)
						}else{
							uni.showToast({
								icon: 'none',
								title: '没有更多了'
							})
						}
						break;
					case 2:
						if(!this.activity4Nomore){
							this.activity4Page++
							this.addData(2,shelf_id)
						}else{
							uni.showToast({
								icon: 'none',
								title: '没有更多了'
							})
						}
						break;
				}
			},
			// 更多数据请求
			addData(type,shelf_id){
				let data = {
					shelf_id,
					asc:2,
					order_by:2
				}
				if(type == 1){
					data.limit = 4,
					data.page = this.activity3Page
				}else if(type == 2){
					data.limit = 4;
					data.page = this.activity4Page
				}
				this.$u.api.GetShelfGoods(data).then(res=>{
					if(type == 1){
						if(res.datas.goods.length){
							res.datas.goods.forEach(item=>{
								this.activity3.goods_list.push(item)
							})
							if(this.activity3.goods_list.length == res.datas.counts){
								this.activity3Nomore = true
							}
							this.$forceUpdate();
						}
					}else if(type == 2){
						if(res.datas.goods.length){
							res.datas.goods.forEach(item=>{
								this.activity4.goods_list.push(item)
							})
							if(this.activity4.goods_list.length == res.datas.counts){
								this.activity4Nomore = true;
							}
							this.$forceUpdate();
						}
					}
				})
			},
			goProInfo(goods_id,name){
				getApp().goProInfo(goods_id,null,null,'年底活动-'+name)
				if(uni.getStorageSync('userInfo')){
					this.addFoot('年底活动-'+name,goods_id)
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #c2111f;
	}
	.year-end{
		.year-end-main{
			.year-end-toppic{
				image{
					width: 100%;
				}
			}
			.year-end-items{
				margin: 0 25rpx;
				.year-end-item{
					background: linear-gradient(0deg, #9C121C, #990832);
					border: 4px solid rgba(231, 123, 71, 0.6);
					box-shadow: 0px 12px 38px 0px rgba(105, 9, 16, 0.5), 0px 0px 24px 0px #E60919 inset;
					border-radius: 10px;
					margin-bottom: 30rpx;
					padding-bottom: 30rpx;
					&:last-child{
						margin-bottom: 0;
					}
				}
				.year-end-item-tit{
					margin-left: -2rpx;
					padding: 20rpx 0;
					image{
						width: 231rpx;
					}
				}
				.year-end-item-tips{
					text-align: center;
					padding-bottom: 20rpx;
					image{
						width: 657rpx;
					}
				}
				.year-end-item-list{
					padding: 0 20rpx;
				}
				.year-end-goods-item{
					margin-bottom: 20rpx;
					position: relative;
					.goods-item-main-hot{
						background: url(https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/year-end/icon-hot.png) no-repeat;
						background-size: cover;
						color: #FFF;
						position: absolute;
						width: 97rpx;
						height: 140rpx;
						z-index: 1;
						right: 40rpx;
						top: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						line-height: 28rpx;
						font-size: 24rpx;
						padding: 20rpx 0 0 10rpx;
						/* #ifdef H5 */
						width: 117rpx;
						height: 169rpx;
						font-size: 24rpx;
						line-height: 30rpx;
						/* #endif */
						view:nth-child(2){
							font-weight: bold;
						}
					}
					&:last-child{
						margin-bottom: 20rpx;
					}
					.goods-item-top,.goods-item-bottom{
						image{
							width: 100%;
							display: block;
							vertical-align: top;
						}
					}
					.goods-item-main{
						margin-top: -2rpx;
						padding: 0 29rpx 0 25rpx;
						background-image: url(https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/goods-bg.png?v=2);
						background-size: contain;
						background-repeat: repeat-y;
						.goods-item-main-goods-image{
							image{
								width: 100%;
								border-radius: 16rpx;
								padding: 15rpx;
								background-color: #FFF;
								box-sizing: border-box;
							}
						}
						.goods-item-main-name{
							font-size: 36rpx;
							font-weight: 400;
							color: #71140B;
							margin: 30rpx 0;
						}
						.goods-item-main-brief{
							font-size: 24rpx;
							color: #71140b;
							margin-bottom: 30rpx;
							line-height: 40rpx;
							margin-top: -20rpx;
						}
						.goods-item-main-price{
							height: 95rpx;
							line-height: 95rpx;
							background: linear-gradient(to bottom, rgba(222, 40, 29, 0.91), rgba(189, 27, 21, 0.91));
							border: 4rpx solid #fdbb67;
							border-radius: 45rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 0 25rpx;
							/* #ifdef H5 */
							padding: 0 15rpx;
							/* #endif */
							.goods-item-main-price-left{
								flex: 1;
								min-width: 0;
								white-space: nowrap;
								margin-top: 10rpx;
							}
							.price-label{
								font-size: 20rpx;
								color: #f9e1b3;
								/* #ifdef H5 */
								font-size: 18rpx;
								/* #endif */
							}
							.price-num{
								font-weight: bold;
								color: #F9E1B3;
								font-size: 50rpx;
								/* #ifdef H5 */
								font-size: 36rpx;
								/* #endif */
								background: linear-gradient(to top,#ff8a00,#FFF);
								background-clip: text;
								-webkit-background-clip: text;
								text-fill-color: transparent;
								-webkit-text-fill-color: transparent;
								font-weight: bold;
								text-shadow: 0 0 6rpx rgba(0, 0, 0, 0.15);
							}
							.price-market{
								font-size: 20rpx;
								color: #EDCFA9;
								margin-left: 5rpx;
								text-decoration: line-through;
							}
							.price-btn{
								height: 63rpx;
								line-height: 63rpx;
								background: linear-gradient(180deg, rgba(249, 232, 199, 0.91), rgba(251, 198, 124, 0.91), rgba(254, 177, 87, 0.91));
								box-shadow: 0px 4px 10px 0px rgba(153, 9, 2, 0.6);
								border-radius: 30rpx;
								font-size: 24rpx;
								color: #B61A14;
								padding: 0 10rpx;
								font-weight: bold;
								/* #ifdef H5 */
								font-size: 12px;
								/* #endif */
							}
						}
					}
				}
				.year-end-item-purchase{
					padding: 0 20rpx;
					.year-end-item-purchase-list{
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						.year-end-item-purchase-item{
							width: 318rpx;
							background: #F9DFC5;
							border: 2rpx solid #F2BA75;
							box-shadow: 0px 4rpx 16rpx 0px rgba(160, 36, 44, 0.56);
							border-radius: 20rpx;
							margin: 0 0 20rpx 0;
							overflow: hidden;
							padding-bottom: 10px;
							border-radius: 16rpx;
							position: relative;
							.purchase-item-img{
								border-radius: 16rpx;
								overflow: hidden;
								position: relative;
								image{
									width: 318rpx;
									height: 318rpx;
									background-color: #FFF;
									border-radius: 16rpx 24rpx 0 0;
								}
							}
							.goods-price{
								display: flex;
								justify-content: space-between;
								/* #ifdef H5 */
								font-size: 24rpx;
								/* #endif */
								background: linear-gradient(to bottom,#c82128,#a11319);
								color: #f7e5bb;
								height: 80rpx;
								margin-bottom: 10rpx;
								.goods-price-left{
									flex: 1;
									min-width: 0;
									display: flex;
									align-items: flex-end;
									padding-left: 10rpx;
									.goods-price-left-item{
										text-align: center;
										height: 80rpx;
										line-height: 35rpx;
										padding-top: 5rpx;
										white-space: nowrap;
										.tips{
											font-size: 20rpx;
										}
										.num{
											font-size: 30rpx;
										}
										.line{
											width: 20rpx;
											height: 4rpx;
											background-color: #f7e5bb;
										}
										.deng{
											width: 15rpx;
											height: 4rpx;
											background-color: #f7e5bb;
											position: relative;
											&::after{
												content: '';
												width: 100%;
												position: absolute;
												height: 4rpx;
												background-color: #f7e5bb;
											}
										}
									}
									.goods-price-left-item:nth-child(2n){
										margin: 0 6rpx 20rpx 6rpx;
										font-weight: bold;
										height: auto;
									}
								}
								.goods-price-right{
									width: 125rpx;
									background: linear-gradient(to right, #FEB158, #F7E5BB, #FEB157);
									border-radius: 10rpx 0px 0px 10rpx;
									padding: 0 10rpx;
									font-weight: bold;
									display: flex;
									flex-direction: column;
									align-items: center;
									justify-content: center;
									margin-left: 10rpx;
									line-height: 38rpx;
									.tips{
										margin-top: 4rpx;
										color: #C82219;
										font-size: 20rpx;
									}
									.goods-price-right-p{
										font-size: 38rpx;
										color: #CD231A;
										margin-top: -4rpx;
										text{
											font-size: 24rpx;
										}
									}
								}
							}
							.goods-name{
								padding: 10rpx;
								color: #71140B;
								font-size: 26rpx;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
							}
						}
					}
					.load-more{
						color: #CE231A;
						width: 231rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						margin: 20rpx auto 0;
						background: linear-gradient(180deg, rgba(249, 232, 199, 0.91), rgba(251, 198, 124, 0.91), rgba(254, 177, 87, 0.91));
						box-shadow: 0px 4px 10px 0px rgba(153, 9, 2, 0.6);
						border-radius: 30rpx;
						font-size: 26rpx;
						font-weight: bold;
					}
				}
			}
			.year-end-info{
				text-align: center;
				padding: 20rpx;
				image{
					width: 100%;
					vertical-align: top;
				}
			}
		}
		.share{
			position: fixed !important;
			left: 0;
			top: 50rpx;
			bottom: 50rpx;
			left: 50rpx;
			right: 20rpx;
			pointer-events: none;
			z-index: 20;
			width: auto;
			height: auto;
			.service-img{
				position: absolute !important;
				width: 80rpx;
				height: 80rpx;
				pointer-events: auto;
				border-radius: 50%;
				top: initial;
				left: initial;
				right: 0;
				bottom: 0;
				bottom: constant(safe-area-inset-bottom);
				bottom: env(safe-area-inset-bottom);
				text-align: center;
				margin-bottom: 100rpx;
				image{
					width: 80rpx;
					height: 80rpx;
				}
			}
			.share-img{
				position: absolute !important;
				width: 80rpx;
				height: 80rpx;
				pointer-events: auto;
				border-radius: 50%;
				top: initial;
				left: initial;
				right: 0;
				bottom: 0;
				bottom: constant(safe-area-inset-bottom);
				bottom: env(safe-area-inset-bottom);
				text-align: center;
				image{
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
	}
</style>
